<template>
    <div>
        <div class="container">
            <el-row class="margin-bottom">
                <el-card class="box-card" v-for="patient in patientData">
                    <template #header>
                        <div class="card-header">
							<el-tag>{{ patient.queNumber }}床 - {{ patient.room }}房</el-tag>
							<span>{{ patient.name }}</span>
                        </div>
                    </template>
                    <div v-if="patient.name !== null" class="text item">{{ patient.age }}岁 {{ patient.gender }} {{patient.day}}天</div>
                    <text class="text" v-for="i in patient.condition">{{i}}&nbsp;</text>
                </el-card>
            </el-row>
        </div>
    </div>
</template>

<script>
import {useStore} from "vuex";
import {computed} from "vue";

export default {
    name: "screenBig",
    setup() {
        const store = useStore();
        return {
            patientData:computed(() => store.state.patientData),
        };
    },
};
</script>


<style scoped>
.margin-bottom {
    margin-bottom: 10px;
}

.box-card {
    min-width: 11%;
    margin-right: 10px;
    margin-bottom: 10px;
}


.box-card:hover {
    margin-top: -5px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.patient-no{
    font-size:16px;
    font-weight:bold;
    color:dodgerblue;
}
.text{
    font-size:13px;
}
</style>